<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>组件基础</title>
    <style type="text/css">
        h1{ text-align: center ;}
        .wrapper { 
            margin: 15px auto;
            border: 1px solid blue ;
            width: 80vw;
        }
        .wrapper>.title {
            margin: 10px;
            color: blue;
        }
    </style>
</head>
<body>

    <h1>组件基础</h1>

    <div class="wrapper">
        <p class="title">组件基本用法</p>
        <ul>
            <li>
                <a href="counter1.html">计数器: (采用全局注册的方式)</a>
            </li>
            <li>
                <a href="counter2.html">计数器: (采用局部注册的方式)</a>
            </li>
        </ul>
    </div>

    <div class="wrapper">
        <p class="title">使用 props 传递数据</p>
        <ul>
            <li>
                <a href="props1.html">使用 props 从父组件向子组件传递数据</a>
            </li>
            <li>
                <a href="props2.html">数据验证(在子组件的props中为属性设置校验规则)</a>
            </li>
        </ul>
    </div>

    <div class="wrapper">
        <p class="title">组件通信</p>
        <ul>
            <li>
                <a href="custom-event.html">自定义事件: 从子组件向父组件传递数据</a>
            </li>
            <li>
                <a href="model-vue2.html">为子组件添加v-model指令导致子组件向父组件传递数据( vue.js 2.x 适用)</a>
            </li>
            <li>
                <a href="model-vue3.html">为子组件添加v-model指令导致子组件向父组件传递数据( vue.js 3.x <b>不适用</b>)</a>
            </li>
            <li>
                <a href="bus.html">借助于"中央事件总线"实现任意组件之间的数据传递</a>
            </li>
            <li>
                <a href="parent-chian.html">父链($parent、$root) / 子组件引用(ref)</a>
            </li>
        </ul>
    </div>

    <div class="wrapper">
        <p class="title">插槽(slot)</p>
        <ul>
            <li>
                <a href="slot-signle.html">理解插槽/使用插槽向子组件分发内容</a>
            </li>
            <li>
                <a href="slot-named.html">命名插槽</a>
            </li>
            <li>
                <a href="slot-scoped.html">作用域插槽</a>
            </li>
        </ul>
    </div>
    
</body>
</html>